<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

    <link rel="stylesheet" href="">
    <style>
        *{
            padding:0;
            margin:0;
            font: 24px/24px "Microsoft Yahei";
            color:white;
        }
        body{
            background:#202020;
        }
        .main{
            width: 1520px;
            height:900px;
            background:#06192A;
            margin:0 auto;
            border:2px solid white;
        }
        .main header{
            height: 150px;
            border-bottom:2px solid #637382;
        }
        .main header h1{
            text-align:center;
            font-weight:bolder;
            position: relative;
            bottom:0;
            padding-top: 104px;
        }
        .main section{
            /*width:1296px;*/
            height:500px;
            margin:0 auto;
        }
        
        .main section .title{
            display:inline-block;
            height:30px;
            line-height:30px;
            padding-top:20px;
            width: 100%;
        }

        .main section b.radio,.main section b.radio:before{
            display:block;
            position: relative;
        }
        .main section b.radio{
            width:16px;
            height:16px;
            border-radius:8px;
            background:white;
            margin-left:2px;

            float:right;
            margin-right:68px;
        }

        .main section b.green:before,.main section b.red:before,.main section b.yellow:before{
            width:12px;
            height: 12px;
            content:"";
            border-radius:6px;
            top:2px;
            left:2px;
        }

        .main section b.green:before{
            background:#008F40;
        }

        .main section b.red:before{
            background:#D10F12;
        }

        .main section b.yellow:before{
            background:#F4A700;
        }

        .main section b.green:after,.main section b.red:after,.main section b.yellow:after{
            display:block;
            width:40px;
            font-size:20px;
            position: relative;
            top:-17px;
            left:-47px;
        }

        .main section .title b.green:after{
            content:"运行";
        }
        .main section .title b.red:after{
            content:"故障";
        }
        .main section .title b.yellow:after{
            content:"报警";
        }

        .content{
            display:inline-block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .content .bg b{
            position: absolute !important;
            margin-right:15px !important;
        }

        .content .s1{
            background-image:url(images/hospital/s1.png);
            width:368.4px;
            height: 412.8px;
        }

        .content .s1 .arrow{
            -webkit-transform: rotate(90deg);
               -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                    transform: rotate(90deg);
            top: 92px;
            left: 57px;
        }
        
        .content .s1 b{
            bottom: 24px;
            right: 70px;
        }

        .content .s2{
            background-image:url(images/hospital/s2.png);
            width: 250.2px;
            height: 208.2px;
            left: 380px;
            top: 216px;
        }

        .content .s2 b,.content .s3 b,.content .s4 b{
            bottom: 35px;
            right: 35px;
        }

        .content .s3{
            background-image:url(images/hospital/s3.png);
            width: 250.2px;
            height: 208.2px;
            left: 680px;
            top: 216px;
        }

        .content .s4{
            background-image:url(images/hospital/s4.png);
            width: 250.2px;
            height: 208.2px;
            left: 980px;
            top: 216px;
        }

        .content .s5{
            background-image:url(images/hospital/s5.png);
            width: 202.15px;
            height: 113.75px;
            left: 1270px;
            top: 300px;
        }

        .content .s5 span{
            font-size:20px;
            position: relative;
            left: 80px;
        }

        .content .arrow{
            background-image:url(images/hospital/arrow.png);
            width:53.1px;
            height: 23.4px;
            zoom:2 !important;
            top: -8px;
            left:1px;
        }

        .content .f1{
            background-image:url(images/hospital/f1.png);
            width: 171.6px;
            height: 163.8px;
            top: 33px;
            left: 416px;
        }

        .content .f1 b{
            bottom:53px;
            left:-24px;
        }

        .content .f1 b:after{
            content:"余氮值";
            width: 60px !important;
            left:-21px !important;
            top: -40px !important;
        }

        .content .f2{
            background-image:url(images/hospital/f2.png);
            width: 250.2px;
            height: 208.2px;
              top: 0;
            left: 680px;
        }

        .content .t1{
            background-image:url(images/hospital/f1.png);
            width: 171.6px;
            height: 163.8px;
            top: 530px;
            left: 416px;
        }

        .content .t2{
            background-image:url(images/hospital/t2.png);
            width: 182px;
            height: 140.25px;
            top: 530px;
            left: 701px;
        }

        .content .t2 b{
            right: -16px;
            top: 65px;
        }

        .pt92{
            top:92px !important;
        }

        .content .bg{
            background-repeat: no-repeat; 
            background-position:center center;
            background-size: cover; 
            -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */ 
            -o-background-size: cover;/* 兼容Opera */ 
            zoom: 1; 
            position: absolute;
            z-index: 2;
        }

        .pr48{
            right:48px !important;
        }
        .pb33{
            bottom:33px !important;
        }
        .pr12{
            right:12px !important;
        }
        .pb44{
            bottom:44px !important;
        }

        .content .gw{
            content:"";
            height: 7px;
            border-top:1px solid #83868C;
            border-bottom:1px solid #83868C;
            position: absolute;

            background:#06192A;
        }

        .content .f1-f2{
            left: 544px;
            top: 135px;
            width:693px;
        }

        .content div.full{
            background:#B3B3B6;
            /*height:inherit;
            width:inherit;*/
        }

        .content .gw div.full{
            width:0;
            height:inherit;
        }

        .content .gh div.full{
            height:0;
            width:inherit;
        }

        .lTor{
            -webkit-transition: all 0.5s linear;
               -moz-transition: all 0.5s linear;
                -ms-transition: all 0.5s linear;
                 -o-transition: all 0.5s linear;
                    transition: all 0.5s linear;

            -webkit-animation: lToR 2s ease infinite;
            -o-animation: lToR 2s ease infinite;
            animation: lToR 2s ease infinite;
        }

        .content .f1-f2 .a1 span{
            display: inline-block;
            font-size: 20px;
            position: relative;
            top: -26px;
            left: -10px;
            width: 60px;
        }

        .content .f1-f2 .arrow{
            left: 330px;
            top: -13.5px;
        }

        .content .f1-f2 .arrow span{
            font-size:10px;
            left: 40px;
            top: -3px;
            position: relative;
        }

        .content .a1{
            background-image:url(images/hospital/a1.png);
            width: 36.4px;
            height: 30.8px;
            top: -15px;
            left: 55px;
        }

        .content .a1 b{
            bottom:-20px;
            left:-4px;
        }

        .pr20{
            left:23px !important;
        }

        .content .gh{
            content:"";
            width: 7px;
            border-left:1px solid #83868C;
            border-right:1px solid #83868C;
            position: absolute;

            background:#06192A;
        }

        .content .f2-s3{
            left: 790px;
            top: 135px;
            height:150px;
        }

        .tTod{
            -webkit-transition: all 0.5s linear;
               -moz-transition: all 0.5s linear;
                -ms-transition: all 0.5s linear;
                 -o-transition: all 0.5s linear;
                    transition: all 0.5s linear;

            -webkit-animation: tTod 2s ease infinite;
            -o-animation: tTod 2s ease infinite;
            animation: tTod 2s ease infinite;
        }

        .content .s2-s5{
            left: 300px;
            top: 347px;
            width:1050px;
        }

        .content .s2-t1{
            left: 495px;
            top: 355px;
            height: 125px;
        }

        .content .s2-t1-wl{
            left: 468px;
            top: 480px;
            width: 32px;

            -webkit-transform: rotateY(-180deg);
               -moz-transform: rotateY(-180deg);
                -ms-transform: rotateY(-180deg);
                 -o-transform: rotateY(-180deg);
                    transform: rotateY(-180deg);
        }

        .content .s2-t1-wr{
            left: 500px;
            top: 480px;
            width: 32px;
        }

        .content .s2-t1-dl{
            left: 468px;
            top: 480px;
            height:125px;
        }

        .content .s2-t1-dl .a1{
            left: -16px;
            top: 40px;
        }

        .content .s2-t1-dl .a1 b.green{
            left: -25px;
            top: -8px;
        }

        .content .s2-t1-dl .a1 b.red{
            left: -25px;
            top: 20px;
        }

        .content .s2-t1-dr{
            left: 523px;
            top: 480px;
            height:125px;
        }

        .content .s2-t1-dr .a1{
            left: -16px;
            top: 40px;
        }

        .content .s2-t1-dr .a1 b.green{
            left: 40px;
            top: -8px;
        }

        .content .s2-t1-dr .a1 b.red{
            left: 40px;
            top: 20px;
        }

        .content .s3-t2{
            top: 363px;
            width:5px;
            height:125px;
        }

        .st-1{left: 733px;}
        .st-2{left: 773px;}
        .st-3{left: 813px;}
        .st-4{left: 853px;}

        .s3-t2-wl{
            left: 733px;
            top: 480px;
            width: 63.5px;
        }

        .s3-t2-wr{
              left: 797px;
            top: 480px;
            width: 63.5px;

            -webkit-transform: rotateY(-180deg);
               -moz-transform: rotateY(-180deg);
                -ms-transform: rotateY(-180deg);
                 -o-transform: rotateY(-180deg);
                    transform: rotateY(-180deg);
        }

        .s3-t2-d{
            left: 792px;
            top: 481px;
            height: 125px;
        }

        .a2{
            background-image:url("images/hospital/a2.jpg");
            width: 23px;
            height: 19px;
            display: inline-block;
            position: absolute;
            top: 57px;
            left: -8px;
        }

        .a2:before{
            font-size:20px;
            position: relative;
            left: -12px;
            top: -4px;
        }

        .st-1 .a2:before{
            content:"1";
        }

        .st-2 .a2:before{
            content:"2";
        }

        .st-3 .a2:before{
            content:"3";
        }

        .st-4 .a2:before{
            content:"4";
        }

        .st-4 .a2:after{
            content:"电磁阀";
            font-size:20px;
            position: absolute;
            left: 26px;
            top: -4px;
            width: 60px;
        }

        .s3-t2 b{
            margin-right:0 !important;
            position: absolute !important;
            top: 80px;
            left: -7px;
        }

        .arr{
            position: absolute;
        }

        .arr img{
            width: 106.2px;
            height: 46.8px;
        }

        .s1 .arr{
            -webkit-transform: rotate(90deg);
               -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                    transform: rotate(90deg);

            left: calc(50% - 70px);
            top: calc(50% - 25px);
        }

        .s5 .arr{
            top:-16px;
        }

        .content .f1-f2 .arr{
            right: -72px;
            top: -27px;
        }

        .content .f1-f2 .arr span{
            font-size:20px;
            left: 80px;
            top: 15px;
            position: absolute;
            width: 80px;
        }

        /**/
        .content .s2-t1-wl,.content .s2-t1-wl .full,
        .content .s2-t1-wr,.content .s2-t1-wr .full,
        .content .s2-t1-dr,.content .s2-t1-dr .full{
            border-radius: 0 10px 0 0;
        }
        .content .s2-t1-dl,.content .s2-t1-dl .full{
            border-radius:10px 0 0 0;
        }
        .content .st-1,.content .st-1 .full,
        .content .s3-t2-wl,.content .s3-t2-wl .full,
        .content .s3-t2-wr,.content .s3-t2-wr .full{
            border-radius: 0 0 0 10px;
        }
        .content .st-4,.content .st-4 .full{
            border-radius: 0 0 10px 0;
        }

        @-webkit-keyframes lToR{
            0%   {width:0;}
            100% {width:100%;}
        }

        @-moz-keyframes lToR{
            0%   {width:0;}
            100% {width:100%;}
        }

        @-o-keyframes lToR{
            0%   {width:0;}
            100% {width:100%;}
        }

        @keyframes lToR{
            0%   {width:0;}
            100% {width:100%;}
        }

        @-webkit-keyframes tTod{
            0%   {height:0;}
            100% {height:100%;}
        }

        @-moz-keyframes tTod{
            0%   {height:0;}
            100% {height:100%;}
        }

        @-o-keyframes tTod{
            0%   {height:0;}
            100% {height:100%;}
        }

        @keyframes tTod{
            0%   {height:0;}
            100% {height:100%;}
        }

        .count{
            position: absolute;
            top: -38px;
            right: 60px;
        }

        .count span {
            position: absolute;
            left: -65px;
            top: 3px;
            font-size: 20px;
        }

        .count ul{
            height: 30px;
            color: #ddd;
            font-family: Consolas, monaco, monospace;
            background:#000009;
            margin:0 1px !important;
            text-align:center;
            list-style: none;
        }

        .count ul li{
            font-size: 20px;
            width:18px;
            height:26px;
            margin-top:2px;
            background:#1A2730;
            /*font-weight:lighter;*/
            float:left;
            margin-left:1px;
        }
    </style>
</head>
<body>
    <div class="main">
        <header>
            <h1>污水处理系统</h1>
        </header>
        <section>
            <div class="title">
                <b class="radio yellow"></b>
                <b class="radio red"></b>
                <b class="radio green"></b>
            </div>
            <div class="content">
                <div class="f1 bg">
                    <b class="radio yellow"></b>
                </div>
                <div class="f2 bg">
                </div>
                <div class="s1 bg">
                    <!-- <div class="arrow bg"></div> -->
                    <div class="arr">
                        <img src="images/hospital/arrow.png" alt="">
                    </div>
                    <b class="radio red pr48 pb33"></b>
                    <b class="radio green"></b>
                </div>
                <div class="s2 bg">
                    <b class="radio red pr12 pb44"></b>
                    <b class="radio green"></b>
                </div>
                <div class="s3 bg">
                    <b class="radio red pr12 pb44"></b>
                    <b class="radio green"></b>
                </div>
                <div class="s4 bg">
                    <b class="radio red pr12 pb44"></b>
                    <b class="radio green"></b>
                </div>
                <div class="s5 bg">
                    <!-- <div class="arrow bg"></div> -->
                    <div class="arr">
                        <img src="images/hospital/arrow.png" alt="">
                    </div>
                    <span>环卫车外运</span>
                </div>
                <div class="t1 bg">
                </div>
                <div class="t2 bg">
                    <b class="radio red pt92"></b>
                    <b class="radio green"></b>
                </div>
                <div class="gw f1-f2">
                    <div class="full"></div>
                    <!-- <div class="arrow bg">
                        <span>达标排外</span>
                    </div> -->
                    <div class="arr">
                        <img src="images/hospital/arrow.png" alt="">
                        <span>达标排外</span>
                    </div>
                    
                    <div class="count">
                        <span>总流量</span>
                        <ul>
                            <li>0</li>
                            <li>4</li>
                            <li>3</li>
                            <li>5</li>
                            <li>0</li>
                            <li>.</li>
                            <li>4</li>
                            <li>6</li>
                            <li>1</li>
                        </ul>
                    </div>

                    <div class="a1 bg">
                        <span>加药泵</span>
                        <b class="radio red pr20"></b>
                        <b class="radio green"></b>
                    </div>
                </div>
                <div class="gh f2-s3">
                    <div class="full"></div>
                </div>
                <div class="gw s2-s5">
                    <div class="full"></div>
                </div>
                <!-- 多个一组 -->
                <div class="gh s2-t1">
                    <div class="full"></div>
                </div>
                <div class="gw s2-t1-wl">
                    <div class="full"></div>
                </div>
                <div class="gw s2-t1-wr">
                    <div class="full"></div>
                </div>
                <div class="gh s2-t1-dl">
                    <div class="full"></div>
                    <div class="a1 bg">
                        <b class="radio red"></b>
                        <b class="radio green"></b>
                    </div>
                </div>
                <div class="gh s2-t1-dr">
                    <div class="full"></div>
                    <div class="a1 bg">
                        <b class="radio red"></b>
                        <b class="radio green"></b>
                    </div>
                </div>
                <!-- 多个一组 -->
                <div class="gh s3-t2 st-1">
                    <div class="full"></div>
                    <span class="a2"></span>
                    <b class="radio green"></b>
                </div>
                <div class="gh s3-t2 st-2">
                    <div class="full"></div>
                    <span class="a2"></span>
                    <b class="radio green"></b>
                </div>
                <div class="gh s3-t2 st-3">
                    <div class="full"></div>
                    <span class="a2"></span>
                    <b class="radio green"></b>
                </div>
                <div class="gh s3-t2 st-4">
                    <div class="full"></div>
                    <span class="a2"></span>
                    <b class="radio green"></b>
                </div>
                <div class="gw s3-t2-wl">
                    <div class="full"></div>
                </div>
                <div class="gw s3-t2-wr">
                    <div class="full"></div>
                </div>
                <div class="gh s3-t2-d">
                    <div class="full"></div>
                </div>
            </div>
        </section>
    </div>
</body>
<script>
$(function(){
    var count = 0;
    //*
    var a = setInterval(function(){
        $(".f1-f2").find(".full").animate({
            width: "100%"
        },2000, function() {
        });

        $(".f2-s3").find(".full").delay("500").animate({
            height: "100%"
        },500, function() {
        });

        var c = $(".s2-s5").find(".full");
        if(!c.is(":animated")){
            $(".s2-s5").find(".full").animate({
                width: "100%"
            },2500, function() {
                if(count == 6){
                    clearInterval(a);
                    return;
                }

                $(".f1-f2").find(".full").css("width",0);
                $(".s2-s5").find(".full").css("width",0);
                $(".s2-t1-wl,.s2-t1-wr").find(".full").css("width",0);
                $(".s3-t2-wl,.s3-t2-wr").find(".full").css("width",0);

                $(".f2-s3").find(".full").css("height",0);
                $(".s2-t1").find(".full").css("height",0);
                $(".s2-t1-dl,.s2-t1-dr").find(".full").css("height",0);
                $(".s3-t2").find(".full").css("height",0);
                $(".s3-t2-d").find(".full").css("height",0);

                count += 1;
            });
        }

        $(".s2-t1").find(".full").delay(500).animate({
            height: "100%"
        },500, function() {
        });

        $(".s2-t1-wl,.s2-t1-wr").find(".full").delay(1000).animate({
            width: "100%"
        },100, function() {
        });
        $(".s2-t1-dl,.s2-t1-dr").find(".full").delay(1100).animate({
            height: "100%"
        },500, function() {
        });

        $(".s3-t2").find(".full").delay(1000).animate({
            height: "100%"
        },500, function() {

        });

        $(".s3-t2-wl,.s3-t2-wr").find(".full").delay(1500).animate({
            width: "100%"
        },200, function() {

        });

        $(".s3-t2-d").find(".full").delay(1700).animate({
            height: "100%"
        },500,function(){

        });
    }, 3000);
    //*/
});
</script>
</html>